<!--
 * @Description: 
 * @Date: 2023-03-10 16:34:00
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 15:48:38
-->
<template>
	<div class="page">
		<div class="header">
			<div class="title-box">
				<span class="title">百味武隆</span>
				<div class="title-sub">Flavors in Wulong</div>
			</div>
			<div>
				<p>武隆美食品种繁多，嫩白清爽的豆花，香辣热情的火锅，鲜美细嫩的羊肉，风味独特的三叶土鸡，鱼中极品芙蓉江鱼......都让人垂涎不已。美食丰富，能寻百味武隆！</p>
				<p>
					Wulong has a wide variety of delicious food, such as tender and refreshing tofu pudding, spicy hot pot, delicious and tender mutton, unique native chicken, and fish of
					Furong River. All are appetizing. Wulong is rich in food and you can find many flavors.
				</p>
			</div>
		</div>
		<!-- 美食地图 -->
		<div class="guide-box">
			<el-image :src="cosPrefix + 'three-level/xiangsu/meishigonglue/baiwei/guide.png'"></el-image>
		</div>

		<!-- 百味武隆 -->
		<div class="food-list1">
			<div class="box" v-for="(item, index) in list1" :key="index">
				<el-image :src="item.img" fit="cover" />
				<span>{{ item.name }}</span>
			</div>
		</div>

		<div class="food-list2">
			<div class="box" v-for="(item, index) in list2" :key="index">
				<el-image :src="item.img" fit="cover" />
				<span>{{ item.name }}</span>
			</div>
		</div>

		<div class="food-list3">
			<div class="box" v-for="(item, index) in list3" :key="index">
				<el-image :src="item.img" fit="cover" />
				<span>{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useBaseStore } from "@/store/base";
const { cosPrefix } = useBaseStore();
// const list = [
// 	{ name: "碗碗羊肉", img: cosPrefix + "three-level/xiangsu/meishigonglue/1.png" },
// 	{ name: "蕨粑腊肉", img: cosPrefix + "three-level/xiangsu/meishigonglue/2.png" },
// 	{ name: "烤全羊", img: cosPrefix + "three-level/xiangsu/meishigonglue/3.jpg" },
// 	{ name: "腊猪蹄炖苕粉", img: cosPrefix + "three-level/xiangsu/meishigonglue/4.jpg" }
// ];

const list1 = [
	{ name: "百味武隆", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/1.png" },
	{ name: "百味武隆", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/2.png" },
	{ name: "武隆苕粉", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/3.png" }
];
const list2 = [
	{ name: "百味武隆", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/4.png" },
	{ name: "百味武隆", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/5.png" },
	{ name: "百味武隆", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/6.png" }
];

const list3 = [
	{ name: "碗碗羊肉", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/7.png" },
	{ name: "羊角豆干", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/8.png" },
	{ name: "野生蘑菇-牛肝菌", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/9.png" },
	{ name: "老腊肉", img: cosPrefix + "three-level/xiangsu/meishigonglue/baiwei/10.png" }
];
</script>
<style lang="scss" scoped>
.guide-box {
	width: 100%;
	.el-image {
		width: 100%;
		margin-top: 60px;
	}
}
.page {
	padding: 40px 320px;
	background-repeat: no-repeat;
	background-size: 100%;
}
.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 16px;
	font-size: 20px;
	.title-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
		span {
			padding: 0;
			margin: 0;
		}
		.title {
			padding: 0;
			margin: 0;
			font-size: 28px;
			font-weight: bold;
		}
		.title-sub {
			font-size: 16px;
		}
	}
	> div {
		line-height: 2em;
		text-indent: 2em;
		p {
			margin: 0;
			font-size: 16px;
		}
	}
}
.food-list1 {
	display: flex;
	margin: 20px 0;
	.box {
		display: flex;
		flex-direction: column;
		align-items: left;
		margin-right: 20px;
		font-size: 20px;
		color: #101010;
		background-color: #ffffff;
		&:last-child {
			margin: 0;
		}
		.el-image {
			width: 413px;
			height: 247px;
			margin-bottom: 20px;
		}
	}
}
.food-list2 {
	display: flex;
	.box {
		display: flex;
		flex-direction: column;
		align-items: left;
		margin-right: 20px;
		font-size: 20px;
		color: #101010;
		background-color: #ffffff;
		&:last-child {
			margin: 0;
		}
		.el-image {
			margin-bottom: 20px;
		}
	}
}
.food-list3 {
	display: flex;
	margin-top: 20px;
	margin-bottom: 80px;
	.box {
		display: flex;
		flex-direction: column;
		align-items: left;
		margin-right: 20px;
		font-size: 20px;
		color: #101010;
		background-color: #ffffff;
		&:last-child {
			margin: 0;
		}
		.el-image {
			margin-bottom: 20px;
		}
	}
}

@media all and (max-width: 750px) {
	.page {
		padding: 16px;
		.header {
			.title-box {
				padding: 0;
			}
		}
		.food-list1,
		.food-list2,
		.food-list3 {
			flex-direction: column;
			.box {
				width: 100%;
				padding: 0;
				margin: 0;
				margin-bottom: 16px;
			}
			.el-image {
				width: 100%;
				height: 260px;
			}
		}
	}
}
</style>
